<template>
  <div>
    <!-- 合作商管理 -->
    <el-row class="header">
      <el-col :span="24">
        <span>区域搜索</span>
        <el-input v-model="query.name" placeholder="请输入内容" style="width:220px" />
        <el-button type="primary" icon="el-icon-search" @click="cha">查询</el-button>
      </el-col>
    </el-row>
    <el-button class="XinJian" type="primary" icon="el-icon-circle-plus-outline" @click="zeng('add')">新建</el-button>
    <el-table
      class="style"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="序号"
        width="150"
        type="index"
      />
      <el-table-column
        prop="name"
        label="合作商名称"
        width="150"
      />
      <el-table-column
        prop="account"
        label="账号"
        width="200"
      />
      <el-table-column
        prop="vmCount"
        label="设备数量"
        width="150"
      />
      <el-table-column
        prop="ratio"
        label="分成比例"
        width="150"
      />
      <el-table-column
        prop="contact"
        label="联系人"
        width="100"
      />
      <el-table-column
        prop="mobile"
        label="联系电话"
        width="150"
      />
      <el-table-column
        prop=""
        label="操作"
        width="250"
      >
        <template #default="{row}">
          <el-button type="text" size="small" @click="handleClick(row.id)">重置密码</el-button>
          <el-button type="text" size="small" @click="xiangqing(row)">查看详情</el-button>
          <el-button class="ss" type="text" size="small" :plain="true" @click="zeng('cdd', row)">修改</el-button>

          <el-button type="text" size="small" style="color: red" @click="del(row.id)">删除</el-button>

        </template></el-table-column>
    </el-table>
    <el-dialog title="收货地址" :visible="dialogFormVisible" @close="clo">
      <div class="div">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="合作商名称:" prop="name">
            <el-input v-model="form.name" class="y" autocomplete="off" placeholder="请输入" maxlength="10" show-word-limit />
          </el-form-item>
          <el-form-item label="联系人:" prop="contact">
            <el-input v-model="form.contact" class="yi" autocomplete="off" placeholder="请输入" maxlength="10" show-word-limit />
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input v-model="form.mobile" class="i" autocomplete="off" placeholder="请输入" maxlength="11" show-word-limit />
          </el-form-item>
          <el-form-item label="分成比例(%):" prop="ratio">
            <el-input-number v-model="form.ratio" placeholder="请输入" controls-position="right" :min="1" :max="100" class="yy" autocomplete="off" maxlength="15" show-word-limit />
          </el-form-item>
          <el-form-item v-if="mum !== 'cdd'" label="账号：" prop="account">
            <el-input v-model="form.account" class="yi" autocomplete="off" placeholder="请输入" maxlength="18" show-word-limit />
          </el-form-item>
          <el-form-item v-if="mum !== 'cdd' " label="密码：" prop="password">
            <el-input v-model="form.password" class="yi" autocomplete="off" placeholder="请输入" maxlength="20" show-word-limit />
          </el-form-item>
          <el-form-item>
            <!-- <div slot="footer" class="dialog-footer"> -->
            <el-button class="it" @click="dia">取 消</el-button>
            <el-button class="em" type="primary" @click="dialog">确 定</el-button>
            <!-- </div> -->
          </el-form-item>
        </el-form>

      </div>

    </el-dialog>
    <el-dialog title="合作商详情" :visible="formVisible" class="el" @close="close">

      <el-row class="row">
        <el-col :span="12"><span class="pan">合作商名称：</span><span>{{ form.name }}</span></el-col>
        <el-col :span="12"><span class="pan">联系人:</span><span>{{ form.contact }}</span></el-col>
      </el-row>
      <el-row class="ro">
        <el-col :span="12"><span class="pan">联系电话:</span><span>{{ form.mobile }}</span></el-col>
        <el-col :span="12"><span class="pan">分成比例:</span><span>{{ form.ratio }}</span></el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { shang, hezuo, shanshan, addService, getShoppingList, chongzhi } from '@/api/point'
export default {
  name: 'Dianwei',
  components: {

  },

  props: {
  },
  data() {
    return {
      sh: {},
      shou: {},
      formVisible: false,
      dialogFormVisible: false,
      query: {
        pageIndex: '1',
        pageSize: '10'
        // name: ''
      },

      tableData: [],
      form: {
        name: '',
        account: '',
        password: '',
        ratio: undefined,
        contact: '',
        // phone: '',
        mobile: ''

      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        account: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
        ratio: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      mm: null,
      mum: null
    }
  },
  created() {
    this.indata()
  },

  methods: {
    xiangqing(type) {
      this.form.name = type.name
      this.form.contact = type.contact
      this.form.mobile = type.mobile
      this.form.ratio = type.ratio
      this.formVisible = true
    },
    handleClick(type) {
      this.$confirm('确定要重置合作商密码吗', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',

        showClose: false,
        center: true

      }).then(async() => {
        await chongzhi(type)
        // console.log(1)
        // this.$Message.success('成功')
        this.$message({

          type: 'success',
          message: '重置密码成功!',
          offset: 100

        })
      }).catch(() => {
        console.log(2)
        this.$notify({
          title: '失败',
          message: '重置密码失败',
          type: 'warning',
          offset: 100
        })
      })
    },
    clo() {
      this.dialogFormVisible = false
    },
    async indata() {
      // const data = await shang(this.query)
      // console.log(data)
      const dat = await getShoppingList(this.query)
      // this.total = +dat.totalCount
      this.tableData = dat.currentPageRecords
      // console.log(dat)
    },
    async cha() {
      const num = await shang(this.query)
      console.log(num)
      this.tableData = num.currentPageRecords
    },
    zeng(type, id) {
      // console.log(row)
      // console.log(type)
      // console.log(id)

      // console.log(this.mm)

      this.dialogFormVisible = true
      if (type === 'cdd') {
        this.mm = id
        this.mum = type
        this.form = {
          name: this.mm.name,
          account: this.mm.account,
          password: this.mm.password,
          ratio: this.mm.ratio,
          contact: this.mm.contact,
          // phone: this.mm.phone,
          mobile: this.mm.mobile
        }
      } else {
        this.form = {
          name: '',
          account: '',
          password: '',
          ratio: '',
          contact: '',

          mobile: ''
        }
      }
      // if (this.mum === 'cdd') {
      //   // const re = await
      //   // const {}
      //   this.form = {
      //     regionName: id.regionName,
      //     remark: id.remark
      //   }
      //   this.dialogFormVisible = true
      // }
    },
    async dialog() {
      try {
        if (this.mum === 'cdd') {
          await this.$refs.form.validate()
          // this.shou = {
          //   id: this.mm.id,
          //   mobile: this.form.mobile
          // }
          this.form.id = this.mm.id

          // this.form = {
          //             id: this.mm.id,
          //             mobile: this.form.mobile
          //           }
          await hezuo(this.form)

          this.$refs.form.resetFields()
          // this.form.regionName = {
          //   regionName: '',
          //   remark: ''
          // }
          // Object.keys(this.form).forEach(item => this.form[item] = null)
          // this.form.regionName = null
          // this.form.remark = null
          // this.$parent.indata()
          // this.form = null
          // this.$emit('update:dialogFormVisible', false)
          this.dialogFormVisible = false
          this.indata()
          // console.log(1)
        // this.$message.success('修改成功')
        } else {
          await this.$refs.form.validate()
          this.sh = {
            password: this.form.password,
            mobile: this.form.mobile
          }
          // await xinhe(this.sh)
          await addService(this.form)
          // this.$parent.indata()
          // this.$emit('update:dialogFormVisible', false)
          this.dialogFormVisible = false
          this.indata()

          this.$refs.form.resetFields()
        }
      } catch (error) {
        if (error.request.status === 500) {
          console.dir(error)
          this.$message({
            message: '数据错误',
            type: 'warning',
            offset: 100
          })
        }
      }
    },
    dia() {
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
    },
    async del(type) {
      try {
        await shanshan(type)
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          offset: 100
        })
        this.indata()
      } catch (error) {
        if (error.response.status === 500) {
          // console.dir(error)

          this.$notify({
            title: '失败',
            message: '原始数据不能删除',
            type: 'warning',
            offset: 100
          })
        }
        console.dir(error)
      }
    },
    close() {
      this.formVisible = false
    }
  }
}
</script>

<style scoped lang='scss'>
.style{
   margin-left: 17px;
   width: 100%
}
.row{
  margin-left: 50px;
  margin-bottom: 20px;
  span{
    margin-right: 20px;
  }
}
.ro{
  margin-left: 60px;
   span{
    margin-right: 20px;
  }
}
.div{
  margin-left: 80px;
 .it{
    // margin: 0 auto;
    margin-left: 210px;
    margin-right: 10px;
  }
  .em{
    background-color: rgba(255, 137, 58);
    border: none;
  }
.yi{
    width: 396px;
    height: 36px;
    margin-left: 25px;
  }
   .y{
    width: 396px;
    height: 36px;

    // margin-left: 10px;
  }
 .i{
    width: 396px;
    height: 36px;
    // margin-left: 100px;
  }
   .yy{
    width: 396px;
    height: 36px;
    margin-right: 138px;
  }
//    .yi{
//     width: 396px;
//     height: 36px;
//     margin-left: 100px;
//   }
//    .yi{
//     width: 396px;
//     height: 36px;
//     margin-left: 100px;
//   }
}
.ss{
  border: none;
}
.header{
  color: rgba(143, 144, 147);
  height: 40px;
  margin-bottom: 40px;
  padding-left: 17px;
  margin-top: 20px;

}
.XinJian{
  background-color: rgba(255, 130, 54) ;
  border: none;
  margin-bottom: 20px;
  margin-left: 17px;
}
</style>
